/* 头部 */

/* 快捷导航 */
.shortcut {
  width: 100%;
  height: 33px;
  line-height: 33px;
  background-color: #f1f1f1;
}
.shortcut-content {
  width: 1200px;
  margin: 0 auto; /*1个参数：上下左右；2个参数：上下、左右；3个参数：上、左右；4个参数：上、右、下、左*/
  overflow: hidden; /*清除浮动*/
}
.welcome {
  float: left; /*左浮动*/
}
.welcome a {
  color: var(--txtcl);
}
.welcome a:hover {
  /*hover为伪类选择器*/
  color: #333;
}
.order-center {
  float: right; /*右浮动*/
}
.order-center li {
  float: left;
}
.order-center span {
  margin: 0 10px;
}
.order-center a:hover {
  color: #999;
}
/* logo区 */
/* ,表示并集 */
.logo-area {
  width: 1200px;
  margin: 28px auto 25px;
  /* 子元素有浮动，父元素在进行浮动清除 */
  /* overflow: hidden; */
}
.logo-area h1::after {
  /* :after为伪元素具有寄生性 */
  content: "品优购";
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}
.search {
  margin-left: 175px;
}
h1,
.search {
  float: left;
}
.search input:first-child {
  /* 伪类 */
  float: left;
  width: 450px;
  height: 35px;
  border: 2px solid var(--bdcl);
  padding: 0 10px;
  /* boeder-box会让盒子的宽高为width和height的值
    如果不设置,盒子的宽度等于width的值加上左右border的宽度
    再加上左右padding的值 */
  box-sizing: border-box;
}
.search input:last-child {
  width: 80px;
  height: 35px;
  background-color: var(--txtcl);
  color: #fff;
  font-size: 16px;
  border: 0;
  /* 相对定位:不会脱离文档流,
    相对自身本来应该出现的位置进行定位,
    可以通过left/right/top/bottom */
  position: relative;
  left: -6px;
  cursor: pointer;
}
.cart {
  width: 160px;
  height: 35px;
  line-height: 35px;
  float: right;
  border: 1px solid #dfdfdf;
  margin-right: 66px;
  background-color: #f7f7f7;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.cart i:first-child {
  color: var(--cl);
  font-size: 18px;
  /* 加粗 */
  font-weight: bold;
}
.cart .cart-txt:hover {
  color: #999;
}
.cart .badge {
  width: 14px;
  height: 14px;
  display: block;
  line-height: 14px;
  border-radius: 7px 7px 7px 0;
  background-color: var(--bgcl);
  color: #fff;
  text-align: center;
  font-size: 12px;
  /* 绝对定位:脱离文档流.相对于最近的relative
    或absolute进行定位,如果前面没有relative或absolute,
    则相对文档最左上角定位 */
  position: absolute;
  right: 35px;
  top: 0px;
}
.clear {
  clear: both;
}
/* 导航栏 */
nav {
  font-size: 16px;
  width: 100%;
  border-bottom: 2px solid var(--bdcl);
  overflow: hidden;
}
.category-title {
  width: 210px;
  height: 45px;
  line-height: 45px;
  background-color: var(--bdcl);
  color: #fff;
  font-size: 16px;
  text-align: center;
}
/* 分类一级导航 */
.category-nav-list {
  /* display: none; */
  width: 210px;
  height: 400px;
  background-color: var(--txtcl);
  position: absolute;
  overflow: visible;
}
.category-nav-list .category-nav-item {
  line-height: 30px;
  font-size: 14px;
  transition: all 0.5s;
}
.category-nav-item:hover {
  background-color: #fff;
}
.category-nav-list .category-nav-item .category-name-0 {
  transition: all 0.5s;
}
.category-nav-item:hover .category-name .category-name-0 {
  color: var(--txtcl);
  padding-left: 20px;
}
.category-nav-item:hover .category-subnav-list {
  /* 显示作用 */
  display: block;
}
.category-nav-list .category-nav-item .category-name a {
  width: 170px;
  height: 100%;
  display: inline-block;
  padding-left: 10px;
  color: #fff;
}
/* 箭头颜色 */
.category-nav-list .category-nav-item .category-name i {
  font-size: 12px;
  color: #fff;
}
/* 分类二级导航 */
.category-subnav-list {
  display: none;
  width: 520px;
  height: 400px;
  background-color: #f7f7f7;
  position: absolute;
  left: 210px;
  top: 0;
  /* 调整层级 */
  z-index: 99;
}
.category-subnav-list li {
  padding: 10px 0 0 15px;
}
.category-subnav-list img {
  height: 46px;
}
.category-subnav-list span {
  position: relative;
  top: -16px;
}
.main-nav li {
  float: left;
}
.main-nav li a {
  width: 90px;
  height: 45px;
  /* 行高,可用于文本内容垂直居中 */
  line-height: 45px;
  /* a为行级标签,不识别宽高,必须将其转换为块级标签以识别宽高 */
  display: block;
  text-align: center;
}
.main-nav li a:hover {
  /* :hover 伪类鼠标悬停 */
  color: #999;
}
/* 轮播图 */
.carousel {
  position: relative;
}
.swiper {
  width: 990px;
  height: 398px;
  position: absolute;
  left: 210px;
  top: 0;
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
.swiper img {
  width: 100%;
  height: 100%;
}